.example3 {
  background-color: var(--color-example3);

  ng-scrollbar {
    color: white;
    border-radius: 4px;
    --scrollbar-size: 12px;
    --scrollbar-track-color: rgba(0, 0, 0, 0.5);
    --scrollbar-border-radius: 6px;
  }

  .mat-mdc-card-content {
    margin: 32px;
  }

  ::ng-deep {
    .scrollbar-track {
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
    }

    .scrollbar-thumb {
      background-image: linear-gradient(to bottom, var(--color-example3), #EFB436);
      box-shadow: inset 0 -1px 0 #f9df91;
    }
  }
}

.sample-wrapper {
  border-radius: 4px;
  height: 350px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.title {
  margin: 0 0 10px;
  text-align: left;
  text-transform: initial;
  font-size: 20px;
  line-height: 30px;
  font-weight: bold;
}

.text {
  font-size: 14px;

  p {
    margin-bottom: 1.5em;
    line-height: 1.6em;
  }
}

.meta {
  margin-bottom: 2em;
  font-size: .9em;
  color: rgba(255, 255, 255, 0.5);
}
